import React, { Component } from 'react';
import {
  StyleSheet, View, Text, ActivityIndicator, DeviceEventEmitter,
} from 'react-native';
// import { connect } from 'react-redux';
import { downloadApp } from '../../services/version';

// @connect(({ version }) => ({
//   modalVisible: version.modalVisible,
//   downloadAddr: version.downloadAddr,
//   progress: version.progress,
// }))
class Version extends Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: '0%',
    };
  }

  componentDidMount() {
    DeviceEventEmitter.addListener('updateProgressEvent', this.updateProgressEvent);
    DeviceEventEmitter.addListener('closeProgressEvent', () => {
      this.props.navigation.goBack();
    });
    this.load();
  }

  componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners('updateProgressEvent');
    DeviceEventEmitter.removeAllListeners('closeProgressEvent');
  }

  updateProgressEvent = (progress) => {
    this.setState({ progress });
  }

  load = () => {
    try {
      downloadApp(global.downloadPath);
    } catch (e) {
      console.error(e);
    }
  }

  render() {
    // const { id } = this.props.navigation.state.params;
    return (
      <View style={styles.container}>
        <View style={styles.label}>
          <ActivityIndicator size="large" />
          <Text style={{ marginTop: 10, color: 'black' }}>
            下载进度{this.state.progress}
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
  },
  label: {
    backgroundColor: 'white',
    paddingLeft: 40,
    paddingRight: 40,
    paddingTop: 20,
    paddingBottom: 20,
    borderRadius: 8,
  },
});

export default Version;
